<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        /* 特点：选中同名标签设置相同模式，无法差异化设置同名标签的样式 */
        p {
            color: brown;
        }
    </style>
</head>
<body>
    <p>这是 p 标签</p>
    <p>sncids</p>
</body>
</html>
<!--
    选择器
    作用:
        查找标签，设置样式。
    基础选择器
        标签选择器:使用标签名作为选择器→选中同名标签设置相同的样式
            例如:p, h1, div, a,img..
            <style>
                p {
                    color:red;
            }
            </style>
        类选择器:
            查找标签，差异化设置标签的显示效果。
            步骤:
                定义类选择器 →.类名
                使用类选择器 →标签添加 class="类名
            <style>
                /*定义类选择器*/
                .red {
                    color:red;
                }
            </style>
            使用类选择器 
            <div class="red">这是 div 标签</div>
        id 选择器
            作用:
                查找标签，差异化设置标签的显示效果。
            场景:
                id 选择器一般配合JavaScript 使用，很少用来设置CSS样式
            步骤:
                定义 id 选择器 → #id名
                使用 id 选择器 → 标签添加 id="id名"
            规则:
                同一个 id 选择器在一个页面只能使用一次
            <style>
                /*定义 id 选择器 */
                #red {
                    color: red;
                }
            </style>
            使用 id 选择器 
                <div id="red">这是 div 标签</div>
        通配符选择器
            作用:
                查找页面所有标签，设置相同样式
            通配符选择器:
                *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
            * {
                color:red;
            }
-->